<template>
	<a-spin :spinning="!isLoading">
		<a-layout class="chat-container">
			<!-- 左侧：会话列表 -->
			<a-layout-sider width="280" class="sidebar">
				<div class="sidebar-header">
					<text>会话列表</text>
				</div>

				<a-list>
					<a-list-item
						v-for="contact in conversations"
						:key="contact.conversationId"
						@click="selectConversation(contact)"
						:class="['contact-item', currentConversation?.conversationId === contact.conversationId ? 'active' : '']"
					>
						<!-- 外层容器，用于相对定位 -->
						<div class="avatar-badge-container">
							<!-- 未读消息数（如需只显示数字，可用一个 div，也可继续使用 a-badge） -->
							<div
								v-if="contact.unReadCount > 0"
								class="badge-top-left"
							>
								{{ contact.unReadCount }}
							</div>
							<!-- 头像 -->
							<a-avatar
								:src="contact.landlordLogo"
								class="contact-avatar"
								style="margin-left: 15px"
							/>
							<!-- 房东名称等信息 -->
							<span class="contact-name">{{ contact.landlordName }}</span>
						</div>

						<!-- 房源缩略图 -->
						<a-image :src="contact.houseImage" :preview="false" width="60px" height="60px" />
					</a-list-item>
				</a-list>
			</a-layout-sider>

			<!-- 右侧：聊天窗口 -->
			<a-layout-content class="chat-content">
				<div class="chat-header">
					<text>{{ currentConversation ? currentConversation.landlordName : '' }}</text>
					<a
						v-if="currentConversation?.houseId"
						style="font-size: 15px"
						:href="`/house-details/${currentConversation.houseId}`"
						target="_blank"
					>
						查看房源详情页
					</a>
				</div>
				<div class="chat-messages" ref="messageContainer">
					<div
						v-for="(message, index) in chatMessages"
						:key="index"
						:class="['mes', message.isSentByMe ? 'mes-sent' : 'mes-received']"
					>
						<!-- 如果是我发的消息，显示顺序：已读状态（左边） + 消息文本 + 头像（右边） -->
						<template v-if="message.isSentByMe">
							<div class="read-indicator" :data-read="message.isRead">{{ message.isRead ? '已读' : '未读' }}</div>
							<text class="message sent">{{ message.content }}</text>
							<a-avatar :src="userLogo" class="message-avatar" />
						</template>

						<!-- 如果是对方发的消息，显示顺序：头像（左边） + 消息文本 + 已读状态（右边） -->
						<template v-else>
							<a-avatar :src="landlordLogo" class="message-avatar" />
							<text class="message received">{{ message.content }}</text>
							<div class="read-indicator" :data-read="message.isRead">{{ message.isRead ? '已读' : '未读' }}</div>
						</template>
					</div>
				</div>
				<!-- 输入框 & Emoji 按钮 -->
				<div class="chat-input">
					<a-textarea v-model:value="newMessage" placeholder="请输入消息..." :rows="3" @pressEnter="sendMessage" />

					<div class="send-emoji-container">
						<a-popover v-model:visible="emojiVisible" trigger="click" placement="top">
							<template #content>
								<div class="emoji-picker">
									<span v-for="emoji in emojis" :key="emoji" @click="insertEmoji(emoji)" class="emoji">
										{{ emoji }}
									</span>
								</div>
							</template>
							<a-button shape="circle" @click="emojiVisible = !emojiVisible">😊</a-button>
						</a-popover>

						<!-- 发送按钮 -->
						<a-button type="primary" @click="sendMessage" :disabled="!newMessage.trim()">发送</a-button>
					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</a-spin>
</template>

<script>
	import userApi from '@/api/userApi';

	export default {
		data() {
			return {
				// 重试定时器
				wsIn: null,
				// websocket
				ws: null,
				// 当前用户ID
				userId: localStorage.getItem('id'),
				userLogo: '',
				landlordId: null,
				landlordLogo: '',
				conversations: [], //所有会话
				currentConversation: null, //当前会话
				chatMessages: [], //当前会话的所有聊天
				newMessage: '',
				messageContainer: null,
				emojiVisible: false,
				emojis: ['😀', '😁', '😂', '🤣', '😊', '😍', '😜', '👍', '👏', '💖', '🎉', '😎', '😭', '🤔'],
				isLoading: false //加载
			};
		},
		mounted() {
			this.getConversations(); // 初始化会话列表
		},
		methods: {
			// 连接 websocket
			WebSocketInitMessage(wsurl) {
				if ('WebSocket' in window) {
					console.log('当前为用户，websock地址:' + wsurl);
					console.log('您的浏览器支持 WebSocket!');
					// 如果 WebSocket 连接已经存在，就不再创建新的连接
					if (this.ws && this.ws.readyState === WebSocket.OPEN) {
						console.log('WebSocket 已经连接，不需要重新连接');
						return;
					}

					// 建立新的 WebSocket 连接
					this.ws = new WebSocket(wsurl);

					this.ws.onopen = () => {
						console.log('WebSocket Open...');
						if (this.wsIn) {
							clearInterval(this.wsIn);
						}
					};

					// 用户端 WebSocket 消息回调
					this.ws.onmessage = (evt) => {
						const data = JSON.parse(evt.data);
						console.log('接收到的数据:', data);

						if (data.type === 'READ_STATUS') {
							this.updateLocalMessagesAsRead(data.conversationId, data.messageIds);
							return;
						}

						// 普通聊天消息
						const newMsg = {
							id: data.id || Date.now(), // 如果没有 ID，使用当前时间戳
							content: data.content,
							conversationId: data.conversationId,
							senderId: data.senderId,
							isSentByMe: data.senderId === parseInt(this.userId),
							isRead: false
						};

						// 如果当前正在查看该会话，且消息不是自己发的，则标记为已读
						if (
							this.currentConversation &&
							this.currentConversation.conversationId === newMsg.conversationId &&
							!newMsg.isSentByMe
						) {
							newMsg.isRead = true;
							userApi
								.markMessagesAsRead(newMsg.conversationId, this.userId)
								.then((res) => {
									console.log('标记已读成功:', res.data);
								})
								.catch((err) => {
									console.error('标记已读失败:', err);
								});
						} else {
							// 如果消息属于其他会话，则更新对应会话的未读数
							this.conversations = this.conversations.map((contact) => {
								if (contact.conversationId === newMsg.conversationId) {
									const unReadCount = contact.unReadCount || 0;

									// 判断是否是对方发来的消息
									if (newMsg.senderId !== parseInt(this.userId)) {
										debugger;
										// 对方发来的消息，更新未读数
										console.log(
											`会话ID: ${newMsg.conversationId}, 未读数更新前: ${unReadCount}, 更新后: ${unReadCount + 1}`
										);

										contact.unReadCount = (contact.unReadCount || 0) + 1; // 如果 unReadCount 没有值，初始化为 0
									}
								}
								return contact;
							});
						}

						// 将新消息添加到本地消息数组中（如果属于当前会话则显示在聊天窗口）
						if (this.currentConversation && this.currentConversation.conversationId === newMsg.conversationId) {
							this.chatMessages.push(newMsg);
							this.scrollToBottom();
						}
					};

					this.ws.onclose = () => {
						console.log('WebSocket connection closed.');
					};

					this.ws.onerror = (error) => {
						console.error('WebSocket error', error);
						// 重试连接的机制
						this.wsIn = setTimeout(() => {
							this.ws.close();
							this.WebSocketInitMessage(wsurl); // 重试连接
						}, 3000);
					};
				} else {
					alert('您的浏览器不支持 WebSocket!');
				}
			},
			// 用户端更新本地消息为已读的方法
			updateLocalMessagesAsRead(conversationId, messageIds = []) {
				// 如果未传入具体的消息ID，则将该会话中所有消息都置为已读
				if (!messageIds || messageIds.length === 0) {
					this.chatMessages = this.chatMessages.map((msg) => {
						if (msg.conversationId === conversationId && !msg.isRead) {
							return { ...msg, isRead: true };
						}
						return msg;
					});
				} else {
					// 如果传入了具体的消息ID，则只更新对应的消息
					this.chatMessages = this.chatMessages.map((msg) => {
						if (msg.conversationId === conversationId && messageIds.includes(msg.id) && !msg.isRead) {
							return { ...msg, isRead: true };
						}
						return msg;
					});
				}
			},
			// 获取所有会话
			getConversations() {
				userApi
					.getAllConversations(this.userId)
					.then((res) => {
						this.conversations = res.data; // 假设返回的数据是一个数组，包含所有会话
						//如果路由有conversationId
						if (this.$route.params.conversationId) {
							const conversationId = this.$route.params.conversationId;
							// 遍历 this.conversations 找到匹配的会话
							const conversation = this.conversations.find((contact) => contact.conversationId == conversationId);
							if (conversation) {
								this.selectConversation(conversation);
							} else {
								console.warn('未在会话列表中找到对应的 conversationId:', conversationId);
							}
						}
					})
					.catch((error) => {
						if (error.response && error.response.data.code === 404) {
							this.$message.warn('会话列表为空');
						}
						console.error('获取会话列表失败', error);
					})
					.finally(() => {
						// 加载完成后关闭全局 loading
						this.isLoading = true;
					});
			},
			// 选择会话
			selectConversation(contact) {
				this.currentConversation = contact;
				this.chatMessages = []; // 清空当前会话的消息
				// 设置用户信息
				this.userLogo = contact.userLogo;
				// 设置房东信息
				this.landlordId = contact.landlordId;
				this.landlordLogo = contact.landlordLogo;

				// 重置该会话的未读数
				this.conversations = this.conversations.map((convo) => {
					if (convo.conversationId === contact.conversationId) {
						convo.unReadCount = 0; // 直接将未读消息数设置为 0
					}
					return convo;
				});

				// 更新路由中的 conversationId 参数
				this.$router.replace({ path: '/user-chat/' + contact.conversationId });

				this.WebSocketInitMessage('ws://localhost:70/websocket/' + this.userId + '/' + this.landlordId);
				console.log('当前用户ID：', this.userId);
				console.log('当前房东ID：', this.landlordId);
				this.getMessages(contact.conversationId); // 获取当前会话的消息

				// 确保滚动到底部
				this.$nextTick(() => {
					this.scrollToBottom();
					this.isLoading = true;
				});
			},
			// 获取会话消息
			getMessages(conversationId) {
				userApi
					.getAllMessages(conversationId)
					.then((res) => {
						this.chatMessages = res.data.map((message) => {
							message.isSentByMe = message.senderId === parseInt(this.userId);
							return message;
						});
						this.scrollToBottom(); // 滚动到底部
					})
					.catch((error) => {
						console.error('获取消息失败', error);
					})

					.finally(() => {
						userApi
							.markMessagesAsRead(conversationId, this.userId)
							.then((response) => {
								console.log('标记已读成功', response.data);
								// 只更新对方发送的消息
								this.chatMessages = this.chatMessages.map((msg) => {
									if (msg.senderId !== parseInt(this.userId)) {
										msg.isRead = true;
									}
									return msg;
								});
							})
							.catch((error) => {
								console.error('标记已读失败', error);
							})
							.finally(() => {
								// 加载完成后关闭全局 loading
								this.isLoading = true;
							});
					});
			},
			// 发送消息
			sendMessage() {
				if (!this.newMessage.trim()) return; // 如果消息为空，直接返回

				const messageDTO = {
					senderId: this.userId,
					receiverId: this.currentConversation?.landlordId, // 接收方 ID
					content: this.newMessage, // 消息内容
					houseId: this.currentConversation?.houseId, // 房源 ID
					conversationId: this.currentConversation?.conversationId //会话ID
				};

				console.log('用户发送了:', messageDTO);
				this.ws.send(JSON.stringify(messageDTO)); // 发送消息

				// 调用 API 发送消息
				userApi
					.sendMessage(messageDTO)
					.then((res) => {
						this.chatMessages.push({
							...messageDTO,
							isSentByMe: true // 标记消息是自己发送的
						});
						this.newMessage = ''; // 清空输入框
						this.scrollToBottom(); // 滚动到底部
					})
					.catch((error) => {
						console.error('发送消息失败', error);
					});
			},
			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					const messageContainer = this.$refs.messageContainer;
					if (messageContainer) {
						// 设置消息容器的滚动位置为底部
						messageContainer.scrollTop = messageContainer.scrollHeight;
					}
				});
			},
			// 插入 Emoji
			insertEmoji(emoji) {
				this.newMessage += emoji;
				this.emojiVisible = false; // 选择后关闭 emoji 选择器
			}
		}
	};
</script>

<style scoped>
	/* 整体布局 */
	.chat-container {
		height: 80vh;
		width: 1200px;
		display: flex;
		margin: 2rem auto auto auto;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
	}

	/* 左侧联系人列表 */
	.sidebar {
		background-color: #f5f5f5;
		border-right: 1px solid #e0e0e0;
		overflow-y: auto;
	}

	.sidebar-header {
		font-size: 20px;
		font-weight: bold;
		margin: 20px;
		text-align: center;
	}

	.contact-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px;
		cursor: pointer;
		transition: background 0.2s;
	}

	.contact-item:hover {
		background-color: #e6f7ff;
	}

	.contact-item.active {
		background-color: #bae7ff;
	}

	.contact-name {
		font-size: 16px;
		margin-left: 12px;
	}

	/* 右侧聊天窗口 */
	.chat-content {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 650px; /* 确保聊天窗口宽度 */
		background-color: #f5f5f5;
	}

	/* 聊天头部 */
	.chat-header {
		padding: 20px;
		border-bottom: 1px solid #e0e0e0;
		font-weight: bold;
		text-align: left;
		font-size: 20px;
		height: 4rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 聊天消息 */
	.chat-messages {
		flex: 1;
		padding: 12px;
		overflow-y: auto;
		display: flex;
		background-color: #ffffff;
		flex-direction: column;
	}

	.message-avatar {
		width: 40px; /* 设置头像宽度 */
		height: 40px; /* 设置头像高度 */
		margin: 0 10px; /* 头像与消息内容之间的间距 */
		flex-shrink: 0; /* 防止头像被挤压 */
		align-self: flex-start; /* 取消垂直居中 */
	}

	.mes {
		padding: 8px 12px;
		margin-bottom: 8px;
		border-radius: 8px;
		word-wrap: break-word;
		display: flex;
		max-width: 80%; /* 限制消息框的最大宽度 */
		align-items: center;
	}

	.mes-sent {
		align-self: flex-end;
	}

	.mes-received {
		align-self: flex-start;
	}

	/* 已读状态样式 */
	.read-indicator {
		font-size: 12px;
		color: red;
		/* 为了确保宽度适当，可添加固定宽度或内边距 */
		padding: 0 0.5rem;
		white-space: nowrap;
	}

	.read-indicator[data-read='true'] {
		color: #169516;
	}

	/* 消息气泡 */
	.message {
		padding: 8px 12px;
		border-radius: 5px;
		word-wrap: break-word;
	}

	.sent {
		align-self: flex-end;
		background-color: RGB(149, 236, 105);
	}

	.received {
		align-self: flex-start;
		background-color: #f0f0f0;
	}

	/* 输入框 */
	.chat-input {
		padding: 12px;
		background-color: #ffffff;
		border-top: 1px solid #e0e0e0;
		display: flex;
		align-items: center;
		gap: 1rem;
		justify-content: space-between;
	}

	/* Emoji 选择器 */
	.emoji-picker {
		display: flex;
		flex-wrap: wrap;
		width: 150px;
		background: #fff;
	}

	.emoji {
		font-size: 20px;
		margin: 5px;
		cursor: pointer;
	}

	.emoji:hover {
		transform: scale(1.2);
	}

	.send-emoji-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}

	/* 相对定位容器 */
	.avatar-badge-container {
		position: relative;
		display: inline-block;
	}

	/* 头像大小自定义 */
	.contact-avatar {
		width: 40px;
		height: 40px;
	}

	/* 未读数居左上角 */
	.badge-top-left {
		position: absolute;
		top: -8px;
		left: 0;
		background-color: #f5222d; /* 你想要的红色，可自行调整 */
		color: #fff;
		border-radius: 50%;
		padding: 0 6px;      /* 字体大小、内边距可按需求调整 */
		font-size: 12px;
		min-width: 18px;
		text-align: center;
		line-height: 18px;
	}
</style>
